<template>
    <div class="userEdit">
      <el-form :model="userEditForm" :rules="userEditRules" v-loading="userEditLoading" label-width="125px" ref="userEditRefs" class="userEditCls">
        <el-form-item label="用户编号：">
          <el-input v-model="userEditForm.id" disabled type="text" size="small" placeholder="请输入用户编号"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <el-input v-model="userEditForm.realName" type="text" size="small" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称：" prop="nickName">
          <el-input v-model="userEditForm.nickName" type="text" size="small" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="登录密码：" prop="passWord">
          <el-input v-model="userEditForm.passWord" type="password" size="small" placeholder="不改密码请留空"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPassWord">
          <el-input v-model="userEditForm.checkPassWord" type="password" size="small" placeholder="不改密码请留空"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
          <el-input v-model="userEditForm.mobile" type="text" size="small" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="用户头像：" prop="headImage">
          <div class="upLoadPicBox">
            <div v-if="userEditForm.headImage" class="pictrue">
              <el-image ref="userLargePreView" class="imgHover" :src="$uploadURL(userEditForm.headImage)" :preview-src-list="[$uploadURL(userEditForm.headImage)]"></el-image>
              <div class="upload_cover_preview">
                <i @click.stop="largePreview('userLargePreView')" class="iconfont icon-yanjing"></i>
                <i @click.stop="delLarge" class="el-icon l-upload el-icon-delete"></i>
              </div>
            </div>
            <div @click="modalPicTap('1', $event)" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
          </div>
        </el-form-item>
        <el-form-item label="用户性别：">
          <el-radio-group v-model="userEditForm.gender">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户地址：">
          <el-input v-model="userEditForm.address" type="text" size="small" placeholder="请输入用户地址"></el-input>
        </el-form-item>
        <el-form-item label="用户状态：">
          <el-radio-group v-model="userEditForm.status">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">锁定</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="subBtnWid">
          <el-button size="mini" type="primary" @click="submitUser('userEditRefs')" :loading="loadingBtn">提交</el-button>
        </div>
      </el-form>
    </div>
</template>

<script>
  import {
    getUserInfoApi as getAppointUserInfo,
    updateUserInfoApi
  } from '@/api/user';

  export default {
    name: 'Index',
    props: {
      userId: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      const validatePassWord = (rule, value, callback) => {
        if (this.userEditForm.checkPassWord !== '') {
          this.$refs.userEditRefs.validateField('checkPassWord');
        }
        callback();
      };
      const validateCheckPassWord = (rule, value, callback) => {
        if (value !== this.userEditForm.passWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        };
      };
      const validateMobile = (rule, value, callback) => {
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value)) {
          callback(new Error('请输入正确的手机号码'));
        } else {
          callback();
        };
      };
      return {
        userEditForm: {
          passWord: '',
          checkPassWord: ''
        },
        userEditRules: {
          nickName: [
            { required: true, message: '请填写用户昵称', trigger: 'blur' }
          ],
          headImage: [
            { required: true, message: '请选择用户头像', trigger: 'change' }
          ],
          passWord: [
            { validator: validatePassWord, trigger: 'blur' },
            { min: 0, max: 64, message: '登录密码最多为64个字符', trigger: 'blur' }
          ],
          checkPassWord: [
            { validator: validateCheckPassWord, trigger: 'blur' },
            { min: 0, max: 64, message: '登录密码最多为64个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, validator: validateMobile, trigger: 'blur' }
          ]
        },
        userEditLoading: false,
        loadingBtn: false
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      submitUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              realName: this.userEditForm.realName,
              password: this.userEditForm.passWord,
              ConfirmPassword: this.userEditForm.checkPassWord,
              mobile: this.userEditForm.mobile,
              nickName: this.userEditForm.nickName,
              headImage: this.userEditForm.headImage,
              gender: this.userEditForm.gender,
              address: this.userEditForm.address,
              status: this.userEditForm.status
            };

            if (!this.userEditForm.passWord || !this.userEditForm.checkPassWord) {
              delete data.passWord;
              delete data.checkPassWord;
            };

            this.$set(this, 'loadingBtn', true);
            updateUserInfoApi(this.userId, data).then(() => {
              this.$message.success('修改成功');
              this.$emit('getUserEditList');
              this.$emit('close');
              this.$set(this, 'loadingBtn', false);
            }).catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getList() {
        const _this = this;
        this.$set(_this, 'userEditLoading', true);
        getAppointUserInfo(_this.userId).then(res => {
          _this.userEditForm = Object.assign(res, _this.userEditForm);
          _this.$set(_this, 'userEditLoading', false);
        }).catch(() => {
          _this.$set(_this, 'userEditForm', {});
          _this.$set(_this, 'userEditLoading', false);
        });
      },
      largePreview(formName) {
        this.$refs[formName].clickHandler();
      },
      delLarge() {
        this.$set(this.userEditForm, 'headImage', '');
      },
      modalPicTap(num, e) {
        const _this = this;
        _this.$modalUpload(function(img) {
          _this.$set(_this.userEditForm, 'headImage', img[0].path);
          _this.$refs.userEditRefs.validateField('headImage');
          // _this.validateFieldForm('headImage');
        }, num, 'store')
      }

    }
  }
</script>

<style scoped>

</style>
